<template>
  <div
      class="impor-container"
      v-loading="loading"
      element-loading-text="文件解析中"
  >
    <div class="impor-cont">


      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">
              <span class="red-color">*</span>
              上传数据
              <span class="cl-999">(xls/xlsx）</span>
            </span>

          </div>
          <hr/>
          <div class="file-box">
            <div class="tip-file cl-999">
              <p>
                <br/>
                点击导入文件进行上传
                <br/>
                支持xls，xlsx格式
              </p>

              <el-button type="primary" @click="selectFile(5)">
                上传文件
              </el-button>
              <input
                  type="file"
                  ref="fileInput"
                  style="display: none"
                  @change="handleFileChange"
              />
            </div>
          </div>
        </el-card>
      </div>

      <!--      <div>-->
      <!--        <el-card class="box-card">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span class="title">-->
      <!--              <span class="red-color">*</span>-->
      <!--              上传学校教职工信息数据-->
      <!--              <span class="cl-999">(xls/xlsx）</span>-->
      <!--            </span>-->

      <!--            &lt;!&ndash;            <el-button&ndash;&gt;-->
      <!--            &lt;!&ndash;              v-no-more-click&ndash;&gt;-->
      <!--            &lt;!&ndash;              style="float: right; padding: 3px 0"&ndash;&gt;-->
      <!--            &lt;!&ndash;              type="text"&ndash;&gt;-->
      <!--            &lt;!&ndash;              @click="downLoadTemplate(1)"&ndash;&gt;-->
      <!--            &lt;!&ndash;              >下载模板&ndash;&gt;-->
      <!--            &lt;!&ndash;            </el-button>&ndash;&gt;-->
      <!--          </div>-->
      <!--          <hr/>-->
      <!--          <div class="file-box">-->
      <!--            <div class="tip-file cl-999">-->
      <!--              <p>-->
      <!--                <br/>-->
      <!--                点击导入文件进行上传-->
      <!--                <br/>-->
      <!--                支持xls，xlsx格式-->
      <!--              </p>-->

      <!--              <el-button type="primary" @click="selectFile(1)">-->
      <!--                上传文件-->
      <!--              </el-button>-->
      <!--              <input-->
      <!--                  type="file"-->
      <!--                  ref="fileInput"-->
      <!--                  style="display: none"-->
      <!--                  @change="handleFileChange"-->
      <!--              />-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <el-card class="box-card">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span class="title">-->
      <!--              <span class="red-color">*</span>-->
      <!--              上传学校学生信息-->
      <!--              <span class="cl-999">(xls/xlsx）</span>-->
      <!--            </span>-->

      <!--            &lt;!&ndash;            <el-button&ndash;&gt;-->
      <!--            &lt;!&ndash;              v-no-more-click&ndash;&gt;-->
      <!--            &lt;!&ndash;              style="float: right; padding: 3px 0"&ndash;&gt;-->
      <!--            &lt;!&ndash;              type="text"&ndash;&gt;-->
      <!--            &lt;!&ndash;              @click="downLoadTemplate(1)"&ndash;&gt;-->
      <!--            &lt;!&ndash;              >下载模板&ndash;&gt;-->
      <!--            &lt;!&ndash;            </el-button>&ndash;&gt;-->
      <!--          </div>-->
      <!--          <hr/>-->
      <!--          <div class="file-box">-->
      <!--            <div class="tip-file cl-999">-->
      <!--              <p>-->
      <!--                <br/>-->
      <!--                点击导入文件进行上传-->
      <!--                <br/>-->
      <!--                支持xls，xlsx格式-->
      <!--              </p>-->

      <!--              <el-button type="primary" @click="selectFile(2)">-->
      <!--                上传文件-->
      <!--              </el-button>-->
      <!--              <input-->
      <!--                  type="file"-->
      <!--                  ref="fileInput"-->
      <!--                  style="display: none"-->
      <!--                  @change="handleFileChange"-->
      <!--              />-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div class="impor-cont">-->
      <!--      <div>-->
      <!--        <el-card class="box-card">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span class="title">-->
      <!--              <span class="red-color">*</span>-->
      <!--              上传权利人数据-->
      <!--              <span class="cl-999">(xls/xlsx）</span>-->
      <!--            </span>-->

      <!--            &lt;!&ndash;            <el-button&ndash;&gt;-->
      <!--            &lt;!&ndash;              v-no-more-click&ndash;&gt;-->
      <!--            &lt;!&ndash;              style="float: right; padding: 3px 0"&ndash;&gt;-->
      <!--            &lt;!&ndash;              type="text"&ndash;&gt;-->
      <!--            &lt;!&ndash;              @click="downLoadTemplate(1)"&ndash;&gt;-->
      <!--            &lt;!&ndash;              >下载模板&ndash;&gt;-->
      <!--            &lt;!&ndash;            </el-button>&ndash;&gt;-->
      <!--          </div>-->
      <!--          <hr/>-->
      <!--          <div class="file-box">-->
      <!--            <div class="tip-file cl-999">-->
      <!--              <p>-->
      <!--                <br/>-->
      <!--                点击导入文件进行上传-->
      <!--                <br/>-->
      <!--                支持xls，xlsx格式-->
      <!--              </p>-->

      <!--              <el-button type="primary" @click="selectFile(3)">-->
      <!--                上传文件-->
      <!--              </el-button>-->
      <!--              <input-->
      <!--                  type="file"-->
      <!--                  ref="fileInput"-->
      <!--                  style="display: none"-->
      <!--                  @change="handleFileChange"-->
      <!--              />-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <el-card class="box-card">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span class="title">-->
      <!--              <span class="red-color">*</span>-->
      <!--              上传网签数据-->
      <!--              <span class="cl-999">(xls/xlsx）</span>-->
      <!--            </span>-->

      <!--            &lt;!&ndash;            <el-button&ndash;&gt;-->
      <!--            &lt;!&ndash;              v-no-more-click&ndash;&gt;-->
      <!--            &lt;!&ndash;              style="float: right; padding: 3px 0"&ndash;&gt;-->
      <!--            &lt;!&ndash;              type="text"&ndash;&gt;-->
      <!--            &lt;!&ndash;              @click="downLoadTemplate(1)"&ndash;&gt;-->
      <!--            &lt;!&ndash;              >下载模板&ndash;&gt;-->
      <!--            &lt;!&ndash;            </el-button>&ndash;&gt;-->
      <!--          </div>-->
      <!--          <hr/>-->
      <!--          <div class="file-box">-->
      <!--            <div class="tip-file cl-999">-->
      <!--              <p>-->
      <!--                <br/>-->
      <!--                点击导入文件进行上传-->
      <!--                <br/>-->
      <!--                支持xls，xlsx格式-->
      <!--              </p>-->

      <!--              <el-button type="primary" @click="selectFile(4)">-->
      <!--                上传文件-->
      <!--              </el-button>-->
      <!--              <input-->
      <!--                  type="file"-->
      <!--                  ref="fileInput"-->
      <!--                  style="display: none"-->
      <!--                  @change="handleFileChange"-->
      <!--              />-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </div>-->
      <!--    </div>-->

    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {importTeacher, importStudent, importObligee, importTab, importInformation} from "@/api/person/import";

// 上传对应的接口
const uploadMap = new Map([
  [1, importTeacher],
  [2, importStudent],
  [3, importObligee],
  [4, importTab],
  [5, importInformation]
]);
// 下载对应的接口
const downMap = new Map([
  [1, ""],
  [2, ""],
  [3, ""],
  [4, ""],
]);

// 文件相关
const loading = ref(false);
const fileInput = ref(null);
const file = ref(null);
const selectType = ref(null);

/**触发上传按钮**/
const selectFile = (type) => {
  selectType.value = type;
  fileInput.value.click(); //点击按钮触发输入框选择文件
};

/**文件绑定**/
const handleFileChange = (e) => {
  //当输入框选择文件后
  file.value = e.target.files[0];

  if (!file.value) return;
  uploadFile(file);
};

/**上传文件**/
const uploadFile = async (file) => {
  //将输入框选择的文件和参数id一起添加进formData
  loading.value = true;
  const formData = new FormData();
  formData.append("file", file.value); //file.value是上传的文件
  let uploadMethod = uploadMap.get(selectType.value);
  console.log("获取的方法：{}", uploadMethod)

  try {
    const res = await uploadMethod(formData);
    if (res.code === 200) {
      ElMessage.success("上传成功");
    }
  } catch (e) {
    console.log("导入报错")
  } finally {
    loading.value = false;
  }
};

/**
 * 下载不同类型文件的模版，1、老师
 * @param type
 */
const downLoadTemplate = (type) => {
  selectType.value = type;
  // 开始执行下载

  const flag = type === "项目申报书模板" ? 222 : 333;
  this.$axios
      .get("/source/download/template", {
        responseType: "blob",
        params: {
          flag,
        },
      })
      .then((data) => {
        const content = data;
        const blob = new Blob([content]);
        const fileName = type + fileType;
        if ("download" in document.createElement("a")) {
          const reader = new FileReader();
          reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
          reader.onload = function (e) {
            const a = document.createElement("a");
            a.download = fileName;
            a.href = e.target.result;
            document.documentElement.appendChild(a);
            a.click();
            URL.revokeObjectURL(a.href);
            a.remove();
          };
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      })
      .catch((e) => {
        this.$message.warning(e.message);
      });
};
</script>

<style lang="less" scoped>
.impor-container {
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;

  .impor-cont {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    > div {
      width: 450px;
      height: 300px;
      margin: 0 20px;
    }
  }

  .impor-bottom {
    height: 80px;
    line-height: 60px;
    display: flex;
    justify-content: flex-end;
    font-size: 16px;
    box-shadow: 0 -3px 4px -2px #d8e5f1; // 上阴影
    .next-btn {
      margin: 20px;
      width: 150px;
    }
  }
}

.box-card {
  height: 100%;
  width: 100%;
  font-size: 18px;

  .clearfix {
    display: flex;
    justify-content: space-between;
  }

  span {
    font-weight: 600;
  }
}

.cl-999 {
  color: #999;
}

.file-box {
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .tip-file {
    margin-top: 20px;
    font-size: 16px;
    text-align: center;

    i {
      font-size: 40px;
    }
  }

  .file-size {
    line-height: 40px;
    margin-left: 10px;
  }
}

.file-up-button {
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
  padding: 10px 40px;
}

.file-data-name {
  display: flex;
  padding: 0 20px;

  .file-icon {
    text-align: center;
    width: 60px;
    height: 80px;
    line-height: 90px;
    border-radius: 5px;
    box-shadow: 0 0 5px #999;
    margin-right: 20px;

    i {
      font-size: 40px;
      color: #c5001b;
      font-weight: 600;
    }
  }

  .file-tip {
    padding-top: 15px;
    color: #444;
    width: 200px;
    text-align: left;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

.files-tip {
  word-break: break-all; // 断开
  word-wrap: break-word; // 强制换行
  white-space: pre-wrap; // 保留空白符正常换行
  padding: 0 20px;
  align-items: center;

  .icon {
    width: 80px;
    margin-right: 20px;
  }

  i {
    color: #67c23a;
    font-weight: 600;
    font-size: 50px;
  }

  h3 {
    font-size: 22px;
    margin: 10px 0;
  }
}

// 为了兼容火狐低版本不显示图标问题
/deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  transform: scale(1.1);
}
</style>
